Make `allow` attribute configurable in iframe panel #19087

tomayac · 2023-12-19T11:46:19Z

Proposed change

The iframe panel lets users embed arbitrary content. One use case is embedding widgets that interact with WebUSB (a concrete example is my Enphase Solar monitor that flashes a WebUSB-connected LED red or green based on the current power production). For this to work, the iframe needs to be granted USB access, which happens via the Permissions-Policy usb (<iframe allow="usb">.

I tried to start a discussion about this in #19028, but it's maybe too niche.

Type of change

Dependency upgrade
Bugfix (non-breaking change which fixes an issue)
New feature (thank you!)
Breaking change (fix/feature causing existing functionality to break)
Code quality improvements to existing code or addition of tests

Example configuration

cards:
  - type: iframe
    url: https://anchovy-honest-properly.ngrok-free.app/
    allow: usb

(I hope that this would work.)

Additional information

This PR is related to issue or discussion: Make `allow` attribute configurable in iframe panel #19028

Checklist

The code change is tested and works locally.
There is no commented out code in this PR.
Tests have been added to verify that the new code works.

If user exposed functionality or configuration variables are added/changed:

Documentation added/updated for www.home-assistant.io

bramkragten · 2023-12-20T21:21:25Z

Your code does not match with your example, your example is for the dashboard iframe card but your code is for the iframe panel.

src/panels/iframe/ha-panel-iframe.ts

Co-authored-by: Quentame <[email protected]>

tomayac · 2024-01-08T17:37:40Z

Thank you very much, @bramkragten! I have now added the same-ish logic to the iframe card that I had added to the iframe panel. I could not test this, so most likely it doesn't work yet. Is there someone familiar with the project who could verify this?

src/panels/iframe/ha-panel-iframe.ts

src/panels/lovelace/cards/hui-iframe-card.ts

src/panels/iframe/ha-panel-iframe.ts

Co-authored-by: Quentame <[email protected]>

bramkragten · 2024-01-16T21:45:46Z

src/panels/iframe/ha-panel-iframe.ts

@@ -41,7 +41,7 @@ class HaPanelIframe extends LitElement {
          )}
          src=${this.panel.config.url}
          sandbox="allow-forms allow-popups allow-pointer-lock allow-same-origin allow-scripts allow-modals allow-downloads"
-          allow="fullscreen"
+          allow=${this.panel.config.allow ?? 'fullscreen'}


This requires a backend change, please link to the core PR

Sorry, not sure what PR you're referring to. Could you clarify?

The config of this panel is provided by core, so you will need to update core too for this to work.

Thank you! I have tried my luck: home-assistant/core#108230. I very much admit that this is a bit out of my comfort zone.

src/panels/lovelace/cards/hui-iframe-card.ts

Co-authored-by: Bram Kragten <[email protected]>

tomayac · 2024-03-11T18:28:27Z

Is #19087 jointly with home-assistant/core#108230 ready to be merged? Anything else needed from my end? @Quentame, you were involved in reviewing both. Thanks for your review again!

tomayac · 2024-04-08T08:27:09Z

I have addressed the conflicts. Could you please take another look?

bramkragten · 2024-04-12T15:26:25Z

The iframe panel is deprecated, we introduced the new webpage dashboard that will replace it. So can you please remove the code for the panel, then we can merge the code for the card.

tomayac · 2024-04-12T15:39:18Z

Removed the iframe panel code. PTAL.

bramkragten · 2024-04-15T09:07:32Z

Thanks! Please add a documentation PR for this feature

Context: home-assistant/frontend#19087.

tomayac · 2024-04-15T09:30:17Z

Thanks! Please add a documentation PR for this feature

Opened home-assistant/home-assistant.io#32321.

habot-it · 2024-06-24T15:33:33Z

Hello,

Would it be possible to add this option on iframe panel ?
Maybe here src/panels/iframe/ha-panel-iframe.ts --> line 45 ?

Thanks for your crazy work !

Make allow attribute configurable in iframe panel

3de9c67

This comment was marked as outdated.

Sign in to view

home-assistant bot added cla-needed cla-recheck cla-signed and removed cla-recheck cla-needed labels Dec 19, 2023

tomayac added 3 commits December 19, 2023 12:51

Delete .vscode/settings.json

13df473

Update ha-panel-iframe.ts

edd6c5c

Don't quote

3bdfa31

bramkragten reviewed Dec 20, 2023

View reviewed changes

src/panels/iframe/ha-panel-iframe.ts Outdated Show resolved Hide resolved

tomayac and others added 3 commits January 8, 2024 18:09

Update src/panels/iframe/ha-panel-iframe.ts

e628d09

Co-authored-by: Quentame <[email protected]>

Make allow configurable for hui-iframe-card

791e445

Merge branch 'dev' into iframe-allow-attribute

88e35af

tomayac requested review from home-assistant[bot], Quentame and bramkragten January 8, 2024 17:49

Merge branch 'dev' into iframe-allow-attribute

3cb252a

Quentame reviewed Jan 9, 2024

View reviewed changes

src/panels/iframe/ha-panel-iframe.ts Outdated Show resolved Hide resolved

src/panels/lovelace/cards/hui-iframe-card.ts Outdated Show resolved Hide resolved

src/panels/iframe/ha-panel-iframe.ts Outdated Show resolved Hide resolved

tomayac and others added 4 commits January 10, 2024 11:11

Update src/panels/iframe/ha-panel-iframe.ts

8d5686c

Co-authored-by: Quentame <[email protected]>

Update src/panels/lovelace/cards/hui-iframe-card.ts

0cd3a10

Co-authored-by: Quentame <[email protected]>

Update src/panels/iframe/ha-panel-iframe.ts

8bf62c6

Co-authored-by: Quentame <[email protected]>

Merge branch 'dev' into iframe-allow-attribute

bf373f8

tomayac requested a review from Quentame January 10, 2024 10:12

bramkragten reviewed Jan 16, 2024

View reviewed changes

src/panels/lovelace/cards/hui-iframe-card.ts Outdated Show resolved Hide resolved

tomayac and others added 2 commits January 17, 2024 11:44

Update src/panels/lovelace/cards/hui-iframe-card.ts

43b3b15

Co-authored-by: Bram Kragten <[email protected]>

Merge branch 'dev' into iframe-allow-attribute

0a9e3ce

tomayac added 2 commits January 22, 2024 12:22

Merge branch 'dev' into iframe-allow-attribute

a058bbf

Merge branch 'dev' into iframe-allow-attribute

73fa3d2

Merge branch 'dev' into iframe-allow-attribute

0b768b9

tomayac requested review from bramkragten and Quentame April 8, 2024 08:26

tomayac added 4 commits April 12, 2024 17:29

Delete src/panels/iframe/ha-panel-iframe.ts

c9d48c9

Merge branch 'dev' into iframe-allow-attribute

191221e

Restore dev

5c9db5b

Update ha-panel-iframe.ts

b94f313

tomayac added 2 commits April 15, 2024 09:47

Prettier

e75c18d

Merge branch 'dev' into iframe-allow-attribute

3ff205e

bramkragten approved these changes Apr 15, 2024

View reviewed changes

bramkragten removed the wait for backend label Apr 15, 2024

bramkragten added the Documentation Needed label Apr 15, 2024

tomayac added a commit to tomayac/home-assistant.io that referenced this pull request Apr 15, 2024

Document new allow config option

09a7c1b

Context: home-assistant/frontend#19087.

tomayac mentioned this pull request Apr 15, 2024

Document new allow config option for iframe card home-assistant/home-assistant.io#32319

Closed

8 tasks

Merge branch 'dev' into iframe-allow-attribute

ce81912

tomayac mentioned this pull request Apr 15, 2024

Document new allow config option for iframe card home-assistant/home-assistant.io#32321

Merged

8 tasks

bramkragten enabled auto-merge (squash) April 15, 2024 11:16

bramkragten disabled auto-merge April 15, 2024 12:48

bramkragten merged commit f21c89c into home-assistant:dev Apr 15, 2024
13 checks passed

tomayac deleted the iframe-allow-attribute branch April 15, 2024 13:37

cvpcs mentioned this pull request May 2, 2024

Make allow attribute configurable in iframe dashboards #20709

Closed

9 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Make `allow` attribute configurable in iframe panel #19087

Make `allow` attribute configurable in iframe panel #19087

tomayac commented Dec 19, 2023 •

edited

Loading

This comment was marked as outdated.

bramkragten commented Dec 20, 2023

tomayac commented Jan 8, 2024

bramkragten Jan 16, 2024

tomayac Jan 17, 2024

bramkragten Jan 17, 2024

tomayac Jan 17, 2024

tomayac commented Mar 11, 2024

tomayac commented Apr 8, 2024

bramkragten commented Apr 12, 2024

tomayac commented Apr 12, 2024

bramkragten commented Apr 15, 2024

tomayac commented Apr 15, 2024 •

edited

Loading

habot-it commented Jun 24, 2024

Make allow attribute configurable in iframe panel #19087

Make allow attribute configurable in iframe panel #19087

Conversation

tomayac commented Dec 19, 2023 • edited Loading

Proposed change

Type of change

Example configuration

Additional information

Checklist

This comment was marked as outdated.

bramkragten commented Dec 20, 2023

tomayac commented Jan 8, 2024

bramkragten Jan 16, 2024

Choose a reason for hiding this comment

tomayac Jan 17, 2024

Choose a reason for hiding this comment

bramkragten Jan 17, 2024

Choose a reason for hiding this comment

tomayac Jan 17, 2024

Choose a reason for hiding this comment

tomayac commented Mar 11, 2024

tomayac commented Apr 8, 2024

bramkragten commented Apr 12, 2024

tomayac commented Apr 12, 2024

bramkragten commented Apr 15, 2024

tomayac commented Apr 15, 2024 • edited Loading

habot-it commented Jun 24, 2024

Make `allow` attribute configurable in iframe panel #19087

Make `allow` attribute configurable in iframe panel #19087

tomayac commented Dec 19, 2023 •

edited

Loading

tomayac commented Apr 15, 2024 •

edited

Loading